import React from 'react';
import './testClass.css';

class TestClass extends React.Component{
  constructor(props){

    super(props);
    this.state = {value: 'Hello',name: props.name,changeVal: props.changeVal};
    this.sumbit = this.handleChange.bind(this);
  }
  handleChange(event){
    this.setState ({
      value: event.target.value
    })
  }
  componentWillMount(){
    console.log('组件初次渲染之前调用')
  }
  componentDidMount(){
    console.log('组件初次渲染完了')
  }
  shouldComponentUpdate(){
    console.log('确认在不更新组件的时候调用')
    return true
  }
  componentWillUpdate(){
    console.log('组件更新之前调用')
  }
  componentDidUpdate(){
    console.log('组件更新的时候调用')
  }
  componentWillUnmount(){
    console.log('组件卸载之前调用')
  }
  componentWillReceiveProps(nextProps){
    console.log('父组件修改传给子组件的值(接收到一个新的props时调用)：',nextProps)
    this.setState({
      changeVal:nextProps.changeVal
    })
  }
  render (){
    const value = this.state.value;
    const name = this.state.name;
    const changeVal = this.state.changeVal;
    return  <div className='classI'>
              <p>一个类函数组件表单</p>
              <p>父组件给类函数组件传过来的值：{name}</p>
              <input type='text' value={value} onChange={this.sumbit}/>
              <h4>{value}</h4>
              <h5>父组件修改传给子组件的值：{changeVal}</h5>
              <button onClick={this.props.changeFatherVal}>子组件改变父组件的值</button>
              <br/>
              <button onClick={this.props.changeBroVal}>兄弟组件改变值</button>
            </div>
  }
}
export default TestClass;